<template>
  <div class="map-main">
    <MapPage class="map" :activeTab="activeTab" :api="api"  :paramsObj="{
        organizationLevelList:[3,4,5]
      }"></MapPage>
    <div class="rate-box">
      <img src="@/assets/imgs/icon-rate.webp" class="icon-img" alt="" />
      <div class="content">
        <p class="label">养老机构（三级及以上）</p>
        <p class="value">69家</p>
      </div>
    </div>
    <!-- <ul class="left-tab-ul">
      <li class="item" v-for="(item, index) in leftTabList" :key="index">
        <p class="label">{{ item.label }}</p>
        <p class="value">
          {{ item.value }}
          <span class="unit">万人</span>
        </p>
      </li>
    </ul> -->

    <ul class="right-tab-ul" :style="{ width: '114px' }">
      <li class="item" v-for="(item, index) in tabList" :key="index">
        <p class="label">{{ item.label }}</p>
        <p class="value">{{ item.value }}</p>
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
import MapPage from './map.vue'

const props = defineProps<{
  activeTab?: any;
  api?: string
  paramsObj?: any
}>();

const tabList = ref([
  { label: "公办公营", value: "2" },
  { label: "公办民营", value: "13" },
  { label: "民营", value: "54" },
]);
const leftTabList = [
  { label: "户籍人口", value: "734.64" },
  { label: "常住人口", value: "954.7" },
  { label: "户籍老年人", value: "181.21" },
];

onMounted(() => {

});
</script>

<style scoped lang="scss">
.map-main {
  position: relative;
  height: 100%;
  width: 100%;

  .map {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    z-index: 100;
    left: 20px;
  }

  .rate-box {
    position: relative;
    z-index: 999;

    .content {
      position: absolute;
      left: 86px;
      top: 45px;
      z-index: 999;

      .label {
        font-family: "Microsoft YaHei";
        font-weight: 400;
        font-size: 18px;
        letter-spacing: 0.05px;
        text-align: center;
        color: #fff;
        // z-index: 999;
      }

      .value {
        font-family: "Franklin Gothic Medium";
        font-weight: 500;
        font-size: 33px;
        letter-spacing: 0.05px;
        text-align: left;
        color: #fff;
        z-index: 999;
        text-shadow: 0 3px 6px rgba(22, 200, 255, 0.33);
      }
    }

    .icon-img {
      width: 135.3px;
      height: 135.3px;
      background: transparent;
    }
  }

  .left-tab-ul {
    @extend .right-tab-ul;
    left: 0;
    top: 200px !important;

    .item {
      background: transparent !important;
      text-align: left !important;
      padding-left: 12px !important;
    }

    .unit {
      font-family: "Microsoft YaHei";
      font-weight: 400;
      font-size: 14px;
      letter-spacing: 0.05px;
      text-align: left;
      color: rgba(255, 255, 255, 0.4);
    }
  }

  .right-tab-ul {
    display: flex;
    flex-flow: column;
    gap: 10px;
    right: 4px;
    top: 20px;
    position: absolute;

    .item {
      padding-right: 10px;
      display: flex;
      flex-flow: column;
      justify-content: center;
      text-align: right;
      gap: 15px;
      min-height: 75px;
      border-radius: 4px;
      background: rgb(29 46 61 / 49%);

      .label {
        font-family: "Microsoft YaHei";
        font-weight: 400;
        font-size: 14px;
        letter-spacing: 0.05px;
        color: #fff;
      }

      .value {
        font-family: "MS PGothic";
        font-weight: 400;
        font-size: 28px;
        color: #16c8ff;
        text-shadow: 0 3px 6px rgba(22, 200, 255, 0.33);
      }
    }
  }
}
</style>
